import { Graph, Shape } from '@antv/x6'

const dagStore = {
  state: {
    graph: null,
    dagData: localStorage.getItem('dagData'),
    containerData: {
      isShowContainer: false,
      containerDetail: []
    },
    modelShapes: [
      {
        label: 'root',
        image: require('@/assets/img/tree/icon1.png'),
        paramList: [{  }]
      },
      {
        label: 'unit',
        image: require('@/assets/img/tree/icon6.png'),
        paramList: [{ }]
      },
      {
        label: 'selector',
        image: require('@/assets/img/tree/icon2.png'),
        paramList: [{ }]
      },
      {
        label: 'sequence',
        image: require('@/assets/img/tree/icon3.png'),
        paramList: [{  }]
      },
      {
        label: 'simpleParallel',
        image: require('@/assets/img/tree/icon4.png'),
        paramList: [{  }]
      },
      // {
      //   label: 'Conditional',
      //   image: require('@/assets/img/tree/icon5.png'),
      //   paramList: [{"id":"1","display_name":"标题","type":"text"}]
      // },
      {
        label: 'action',
        image: require('@/assets/img/tree/icon7.png'),
        paramList: [{ }]
      },
      
    ]
  },
  actions: {
    getModelShapes: ({ commit }) => {
      console.log("getModelShapes")
      commit('GETMODELSHAPES')
    },
    assignGraph: ({ commit }, selector) => {
      console.log("ASSIGNGRAPH", selector)
      commit('ASSIGNGRAPH', selector)
    },
    optForNode: ({ commit }, item) => {
      console.log("optForNode", item)
      commit('OPTFORNODE', item)
    },
    unOptForNode: ({ commit }, item) => {
      console.log("unOptForNode")
      commit('UNOPTFORNODE', item)
    },
  },
  mutations: {
    GETMODELSHAPES: (state) => {
      console.log("modelShape3333333s")
      return state.modelShapes
    },
    ASSIGNGRAPH: (state, selector) => {
      state.graph = new Graph({
        container: document.getElementById(selector),
        grid: false,
        mousewheel: {
          enabled: true,
          zoomAtMousePosition: true,
          modifiers: 'ctrl',
          // minScale: 0.5,
          minScale: 0.3,
          maxScale: 3,
        },
        connecting: {
          router: {
            name: 'manhattan',
            args: {
              padding: 20,
            },
          },
          connector: {
            name: 'rounded',
            args: {
              radius: 2,
            },
          },
          anchor: 'center',
          connectionPoint: 'anchor',
          allowBlank: false,
          snap: {
            radius: 20,
          },
          createEdge() {
            return new Shape.Edge({
              attrs: {
                line: {
                  stroke: '#A2B1C3',
                  strokeWidth: 2,
                  targetMarker: {
                    name: 'block',
                    width: 12,
                    height: 8,
                  },
                },
              },
              zIndex: 0,
            })
          },
          validateConnection({ targetMagnet }) {
            return !!targetMagnet
          },
        },
        highlighting: {
          magnetAdsorbed: {
            name: 'stroke',
            args: {
              attrs: {
                fill: '#5F95FF',
                stroke: '#5F95FF',
              },
            },
          },
        },
        resizing: false,
        rotating: false,
        selecting: {
          enabled: true,
          rubberband: true,
          showNodeSelectionBox: true,
        },
        snapline: true,
        keyboard: true,
        clipboard: true,
      })
      const ports = {
        groups: {
          top: {
            position: 'top',
            attrs: {
              circle: {
                r: 8,
                magnet: true,
                stroke: '#5F95FF',
                strokeWidth: 1,
                fill: '#fff',
                style: {
                  visibility: 'hidden',
                },
              },
            },
          },
          right: {
            position: 'right',
            attrs: {
              circle: {
                r: 8,
                magnet: true,
                stroke: '#5F95FF',
                strokeWidth: 1,
                fill: '#fff',
                style: {
                  visibility: 'hidden',
                },
              },
            },
          },
          bottom: {
            position: 'bottom',
            attrs: {
              circle: {
                r: 8,
                magnet: true,
                stroke: '#5F95FF',
                strokeWidth: 1,
                fill: '#fff',
                style: {
                  visibility: 'hidden',
                },
              },
            },
          },
          left: {
            position: 'left',
            attrs: {
              circle: {
                r: 8,
                magnet: true,
                stroke: '#5F95FF',
                strokeWidth: 1,
                fill: '#fff',
                style: {
                  visibility: 'hidden',
                },
              },
            },
          },
        },
        items: [
          {
            group: 'top',
          },
          {
            group: 'right',
          },
          {
            group: 'bottom',
          },
          {
            group: 'left',
          },
        ],
      }
      Graph.registerNode(
        'custom-image',
        {
          inherit: 'rect',
          width: 112,
          height: 70,
          markup: [
            {
              tagName: 'rect',
              selector: 'body',
            },
            {
              tagName: 'image',
            },
            {
              tagName: 'text',
              selector: 'label',
            },
          ],
          attrs: {
            body: {
              stroke: '#fff',
              fill: '#fff',
            },
            image: {
              width: 32,
              height: 32,
              refX: 40,
              refY: 7,
            },
            label: {
              refX: 20,
              refY: 40,
              textAnchor: 'left',
              textVerticalAnchor: 'top',
              fontSize: 12,
              fill: '#fff',
            },
          },
          ports: { ...ports },
        },
        true,
      )
      Graph.registerNode(
        'my-html',
        {
          inherit: 'html',
          width: 112,
          height: 70,
          x: 0,
          y: 0,
          ports: { ...ports },
        },
        true,
      )


    },
    OPTFORNODE: (state, item) => {
      console.log("OPTFORNODE", item)
      state.containerData.isShowContainer = true
      
      console.log("item.store.data.", item.store.data)
      if (item.store.data.value!=null){
        let data = item.store.data.value
        item.store.data.paramList[0].defaultValue= data
      }
      else{
        item.store.data.paramList[0].type =item.store.data.node_type
      
      }
      state.containerData.containerDetail = item.store.data.paramList

      let data= item.store.data.paramList[0].defaultValue
      if (data ) {
        if (data.title && data.title.length > 0) {
          let html = item.store.data.html_begin + data.title + item.store.data.html_end
          item.html = html
          console.log("html",html)
        }
      }
    
    },
    UNOPTFORNODE: (state, item) => {
      let data = item.store.data.value
      console.log("data", data)
      if (data ) {
        if (data.title && data.title.length > 0) {
          let html = item.store.data.html_begin + data.title + item.store.data.html_end
          item.html = html
          console.log("html",html)
        }
      }
      state.containerData.isShowContainer = false
    }
  }
}
export default dagStore
